{template 'common/header'}
<link rel="stylesheet"  type="text/css" href="{$aideUrl}app/resource/aitimt/css/iconfont.css">
{php $item = array('0'=>'待支付','1'=>'待参与','3'=>'已完成','7'=>'已退款');}

<style>
	.mui-table-view .mui-media, .mui-table-view .mui-media-body{line-height: 2rem;}
	.mui-slider-indicator.mui-segmented-control .mui-control-item {border-bottom: 1px solid #c1c1c1;padding: 0 15px!important;margin: 0;color: #585858;}
	.apply-title{line-height: 18px!important;}
	.mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{color: #585858;border-bottom: 3px solid #E94709!important;    line-height: 35px;}
	.mui-h4, h4{font-size: 13px;font-weight: 700;margin: 5px 0;color: #000000;}
	.mui-slider .mui-slider-group .mui-slider-item img{width: 90%;height: 3rem;margin: 10px 10px 0 10px;}
	.field {background-color: #FFFFFF;display: inline-block;border-bottom: #EEEEEE 1px solid;margin-top: 0}
	.field .left-content {float: left;width: 45%;}
	.field .left-content p{text-align: center;color:#8f8f94;}
	.field .event-content {float: right;width: 50%;padding-top: 10px;margin-right: 10px;}
	.field .event-content .event-no{font-size: 10px;margin: 0;padding: 0;color: #8f8f94;}
	.field .event-content .event-pro{font-size: 14px;margin: 0;color:#8f8f94;}
	.field .event-content .event-price{font-size: 10px;color:#8f8f94;}
	.mui-bar-tab .mui-tab-item.mui-active{color: #ea4609;}
	.hint{text-align: center;padding-top: 15%;font-size: 18px;}
	.field:last-child{border-bottom: 0}
	.field .event-content .event-no .event-state-red{float: right;color: #e94709;}
	.field .event-content .event-price .event-btn-red{float: right;font-size: 10px;padding: 0 10px;border-radius: 35px;border: 1px solid;color: #e94709;}
	.field .event-content .event-no .event-state-green{float: right;color: #33c126;}
	.field .event-content .event-price .event-btn-green{float: right;font-size: 10px;padding: 2px 10px;border: 1px solid;border-radius: 35px;color: #33c126;}
	.mui-slider .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-group .mui-slider-item{border: 0;}
	.event-content a{color: red;}
	.dropload-down{margin-bottom: 20%}
	.dropload-load, .dropload-noData, .dropload-refresh, .dropload-update{line-height: 20px}
	.mui-bar-tab .mui-tab-item .mui-icon~.mui-tab-label{font-size: 11px}
	body{font-family:unset;}
	.no-orders-at-all{height: 3rem}
	.no-orders-at-all .head-block{padding-top: 1rem;font-size: 15px;}
</style>
<!-- 公共头部start -->
<header class="mui-bar mui-bar-nav" style="padding: 10px">
	<a class="top-return mui-action-back"><img src="{$aideUrl}app/resource/aitimt/images/return.png" ></a>
	<a class="top-logo"><img src="{$aideUrl}app/resource/aitimt/images/logo.png" ></a>
	<!--公共菜单start -->
	{template 'aitimt/common/menu'}
	<!-- 公共菜单end-->
</header>
<div class="mui-content">
	<div id="slider" class="mui-slider" style="height:100%">
		<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted" style="background-color: #eeeeee">
			<div class="mui-scroll">
				<a class="mui-control-item mui-active" href="#item1mobile" data-status='-1'>全部</a>
				{php $itemNum=0;}
				{loop $item $k $v}
				<a class="mui-control-item" href="#item{php echo $itemNum+2}mobile" data-status='{$k}'>{$v}</a>
				{php $itemNum++;}
				{/loop}
				<div id="sliderProgressBar" class="mui-slider-progress-ext"></div>
			</div>
		</div>
		<div class="mui-slider-group" style="height:100%">
			<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
				<div class="mui-scroll-wrapper-ext">
					<div class="mui-scroll-ext">
						<div class="list-content"></div>
					</div>
				</div>
			</div>
			{php $itemNum=0;}
			{loop $item $k $v}
			<div id="item{php echo $itemNum+2}mobile" class="mui-slider-item mui-control-content">
				<div class="mui-scroll-wrapper-ext">
					<div class="mui-scroll-ext">
						<div class="list-content">
							<div class="mui-loading">
								<div class="mui-spinner"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
			{php $itemNum++;}
			{/loop}
		</div>
	</div>
</div>
<!-- 公共底部start -->
{template 'aitimt/common/nav'}
<!-- 公共底部end -->
<script>
    //屏蔽slider选项卡弹出遮罩
    $('.mui-control-item').on("tap",function(e) {
        $("body").addClass('mui-backdrop-none');
        setTimeout(function() {
            $("body").find('.mui-backdrop').remove();
            $("body").removeClass('mui-backdrop-none');
        });
    });
    //取消订单
    $(document).on('click','.cancel',function(){
        var recordid = $(this).attr('rid');
        var activityid = $(this).attr('aid');
        util.confirm('确认取消报名？', ' ', function(e) {
            if (e.index == 1) {
                $.post("{php echo app_url('records/records/cancel')}",{recordid:recordid,activityid:activityid},function(d){
                    if(d.result == 1){
                        util.toast('报名取消成功');
                        setTimeout(function () {
                            location.href = "{php echo app_url('records/records/list')}";
                        }, 1000);
                    }else{
                        util.toast('报名取消失败');
                    }
                },"json");
            } else {}
        })
    });
    //支付订单
    $(document).on('click','.topay',function(){
        var recordid = $(this).attr('rid');
        $.post("{php echo app_url('records/records/topay')}",{recordid:recordid},function(d){
            if(d.status == 1){
                location.href = "{php echo app_url('pay/paytype/display')}&recordid="+recordid;
            }else{
                util.toast(d.result);
            }
        },"json");
    });
    //上拉加载活动列表
    var loadItem=function(id,sn,status){
        var thispage = 1,pagesize = 10;
        var counter=0;//计数器
        $(id).find('.mui-scroll-ext').dropload({
            scrollArea : $(id).find('.mui-scroll-wrapper-ext'),
            loadDownFn : function(me){
                $.ajax({
                    type: 'GET',
                    url: "{php echo app_url('home/index/ajax')}",
                    data: {page:thispage,pagesize:pagesize,status:status},
                    dataType: 'json',
                    success: function(data){
                        var stime = new Date(),result='',status=0,entrystatus=0;
                        if (thispage > data.tpage || data.tpage == 0){
                            me.lock();// 锁定
                            me.noData();// 无数据
                        }
                        if (data.tpage == 0){
                            result = '<div class="no-orders-at-all">'
                                +'<div class="head-block">'
                                +'    <p class="hint">暂无信息</p>'
                                +'    <p class="recommend-hint"></p>'
                                +'</div></div>';
                            $(id).find('.list-content').append(result);
                            me.resetload();
                            return false;
                        }
                        for(var i = 0; i < data.list.length; i++){
                            status = parseInt(data.list[i].status);
                            entrystatus = parseInt(data.list[i].entrystatus);
                            price = data.list[i].price;
                            aprice = data.list[i].aprice;
                            payprice = data.list[i].payprice;
                            paytype = data.list[i].paytype;
                            hascancel = parseInt(data.list[i].hascancel);
                            review = parseInt(data.list[i].review);
                            merchant  = data.list[i].merchant;
                            joinstime = new Date(data.list[i].joinstime.replace(/-/g, "/"));
                            joinetime = new Date(data.list[i].joinetime.replace(/-/g, "/"));
                            starttime = new Date(data.list[i].starttime.replace(/-/g, "/"));
                            endtime   = new Date(data.list[i].endtime.replace(/-/g, "/"));
                            jointime  = new Date(data.list[i].jointime.replace(/-/g, "/"));

                            var statusmsg='';
                            var statusbtn='';
                            var cynumber='';
                            if (data.list[i].cynumber!="") {
                                cynumber='<p>参赛号码:'+data.list[i].cynumber+'</p>';
                            }
                            if (entrystatus==0) {
                                statusmsg = '<span class="event-state-red">未确认</span>';
                                statusbtn='<a href="'+"{php echo app_url('home/index/pay')}&recordid="+data.list[i].id+'"  class="event-btn-red">去确认</a>';
                            }else {
                                switch(status){
                                    case 0: statusmsg = '<span class="event-state-red">未支付</span>';statusbtn='<a href="'+"{php echo app_url('home/index/pay')}&recordid="+data.list[i].id+'"  class="event-btn-red">去支付</a>';break;
                                    case 1:	statusmsg = '<span class="event-state-green">待参与</span>';break;
                                    case 2:	statusmsg = '<span class="event-state-green">待参与</span>';break;
                                    case 3: statusmsg = '<span class="event-state-green">已参与</span>';break;
                                    case 5: statusmsg = '<span class="event-state-red">已取消</span>';break;
                                    case 7: statusmsg = '<span class="event-state-red">已退款</span>';break;
                                    default:break;
                                }
                            }

                            if (review==0)statusmsg = '<font class="mui-text-danger">待审核</font>';

                            price =  '<div class="price '+(aprice > 0 && payprice=='' ?'':'mui-text-success')+'"><span class="mui-small">合计:￥</span><span class="mui-big">'+price+'</span> </div> ';
                            price = aprice == '' ? '<div class="price mui-text-success">免费</div>' : price;
                            time=data.list[i].orderno;
                            var detail="{php echo app_url('home/index/pay')}"+'&recordid='+data.list[i].id;
                            result+= '<div class="field">\n' +
                                '        <a href='+detail+'>\n' +
                                '           <div class="left-content">\n'+
                                '         		<img src='+"{$_W['attachurl']}"+data.list[i].thumb+'>\n' +
                                cynumber+
                                '			</div>\n'+
                                '        <div class="event-content">\n' +
                                '         <p class="event-no">单号:'+time.slice(0,14)+'\n'+statusmsg+'\n'+
                                '         </p>\n' +
                                '         <h4 class="event-title">'+data.list[i].title+'</h4>\n' +
                                '         <p class="event-pro">'+data.list[i].pname+'</p>\n' +
                                '         <p class="event-price">'+data.list[i].pprice+'\n'+statusbtn+'\n'+
                                '         </p>\n' +
                                '        </div>\n' +
                                '        </a>\n' +
                                '       </div>'
                        }

                        thispage++;
                        $(id).find('.list-content').append(result);
                        // 每次数据加载完，必须重置
                        me.resetload();
                    },
                    error: function(xhr, type){
                        // alert('加载失败，请刷新下重试!');
                        // 即使加载出错，也得重置
                        me.resetload();
                    }
                });
            }
        });
    }
    $(function() {
        var item_index = parseInt('{$index}');
        if (item_index){
            mui('#slider').slider().gotoItem(item_index);
            $('#item1mobile').find('.list-content').append('<div class="mui-loading"><div class="mui-spinner"></div></div>');
        }else{
            loadItem('#item1mobile',0,$('.mui-control-item.mui-active').data("status"));
        }
    });
    //滑动效果
    (function(m) {
        var htmlFont = $("html").css("font-size").replace('px',''),
            itemWidth = new Array(),
            itemID =  new Array(),
            transX = 0;
        $(".mui-control-item").each(function(key){
            itemWidth[key]=$(this).width();//初始化每个control-item的宽度
            itemID[key]=document.getElementById('item'+(key+1)+'mobile');//初始slider-item,ID
        });
        //alert($(itemID[0]).find('.mui-scroll-wrapper-ext').html());
        $('#sliderProgressBar').css("width",itemWidth[0]);
        document.getElementById('slider').addEventListener('slide', function(e) {
            var sn = e.detail.slideNumber,//初始化当前被激活的item序号
                itemX=0;
            //初始化每次进度条滑动的距离
            for (var i = 0; i < sn; i++ ){
                itemX += itemWidth[i];
            }
            transX = itemX/htmlFont+0.7*sn;
            //$('#sliderProgressBar').stop().animate({left:transX+'rem'},200);
            $('#sliderProgressBar').css('left',transX+'rem');
            setTimeout(function() {
                $('#sliderProgressBar').css('width',itemWidth[sn]);
            }, 150);
            if (itemID[sn].querySelector('.mui-loading')) {
                setTimeout(function() {
                    itemID[sn].querySelector('.list-content').innerHTML = '';
                    loadItem(itemID[sn],sn,$('.mui-control-item.mui-active').data("status"));
                }, 600);

            }
        });
    })(mui);

</script>
</body>
</html>
